<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ol{
            overflow: hidden;
            list-style-type:none;
        }
        li{
            width:200px;
            float: left;
        }
    </style>
</head>
<body>
    <ol>
        <li><a href="#user">普通用户</a></li>
        <li><a href="#manager">管理员用户</a></li>
    </ol>
    <hr>
    <div id="insertPoint"></div>
</body>
</html>
<script>
    function selectPage(){
        let url=location.hash.replace("#","");
        console.log(url);
        let node=document.getElementById("insertPoint");
        switch(url){
            case "user" :
                node.innerHTML="<a href='#'>普通用户登录</a>";
                break;
            case "manager" :
                node.innerHTML="管理员用户登录";
                break;
        }
    }
    window.addEventListener("hashchange",selectPage,false);
</script>